<template>
  <el-card shadow="never" style="border: none">
    <div slot="header">
      <i class="el-icon-ticket" />
      <span>巡查基本信息</span>
    </div>
    <el-row>
      <el-col :span="8">
        <span class="label">任务名称：</span>
        <span class="value">{{ info.task_name }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">任务显示名称：</span>
        <span class="value">{{ info.task_label }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">公司名称：</span>
        <span class="value">{{ info.corp_name }}</span>
      </el-col>
    </el-row>

    <el-row class="mt20">
      <el-col :span="8">
        <span class="label">任务状态：</span>
        <span class="value">{{ info.status }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">巡查人员：</span>
        <span class="value">{{ info.walker_name }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">巡查地点：</span>
        <span class="value">{{ info.task_place }}</span>
      </el-col>
    </el-row>

    <el-row class="mt20">
      <el-col :span="8">
        <span class="label">开始时间：</span>
        <span class="value">{{ parseTime(info.begin_time) }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">结束时间：</span>
        <span class="value">{{ parseTime(info.end_time) }}</span>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  name: 'TaskInfoCard',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.label {
  color: $text-color-light;
  line-height: 24px;
}
.value {
  color: $label-color;
  line-height: 24px;
}
</style>
